<div class="detail">
    <h2>Containers Network</h2>

    <div class="row">
        <div class="input-group">
            <input type="text" ng-model="query" autofocus="true" class="form-control"
                   placeholder="Search" ng-change="network.selectContainers(query)"/>
            <span class="input-group-addon"><span class="glyphicon glyphicon-search"/></span>
        </div>
    </div>
    <div class="row">
        <div class="btn-group">
            <button class="btn btn-warning" ng-click="network.hideSelected()">Hide Selected</button>
            <button class="btn btn-info" ng-click="network.showSelectedDownstream()">Show Selected Downstream</button>
            <button class="btn btn-info" ng-click="network.showSelectedUpstream()">Show Selected Upstream</button>
            <button class="btn btn-success" ng-click="network.showAll()">Show All</button>
        </div>
        <input type="checkbox" ng-model="includeStopped" id="includeStopped" ng-change="toggleIncludeStopped()"/> <label
            for="includeStopped">Include stopped containers</label>
    </div>
    <div class="row">
        <vis-network data="network.data" options="network.options" events="network.events"
                     component="network.component"/>
    </div>
</div>
